<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		.banner{
			width: 670px;
			height: 280px;
			background: url(./练习/img/1.jpg);
			margin: 0px auto;
		}
		.icon{
			position: absolute;
			right: 10px;
			bottom: 10px;
			width: 130px;
			height: 30px;

		}
		.icon span{
			float: left;
			width: 30px;
			height: 30px;
			border-radius: 50%;
			margin-left: 10px;
			line-height: 30px;
			text-align: center;
			color: #fff;
			cursor: pointer;
		}
	</style>
</head>
<body>

	<div class="banner">
		<div class="icon">
			<span>1</span>
			<span>2</span>
			<span>3</span>
		</div>
	</div>
<script type="text/javascript">
	
	var spans = document.querySelectorAll('span')
	var banner = document.querySelector('.banner')
	for(let i = 0; i < spans.length ; i++){
		spans[i].onclick = function(){
			let num = this.innerText
			banner.style.backgroundImage='url(a'+num+'.jpg)'
		}
	}
</script>
</body>
</html>